<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>栏目管理</title>
<link rel="stylesheet" type="text/css"
	href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../js/easyui/themes/icon.css">
<script type="text/javascript" src="../../js/easyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
	src="../../js/easyui/jquery.easyui.min.js"></script>
<script>
function createColumn() {
    $("#columnForm").form('submit', {
        url: "add_or_update_column.action",
        onSubmit:function() {
            return $(this).form('validate');
        },
        success:function(data) {
        	$('#columnsGrid').treegrid('reload');
            closeColumnForm();
        }
    });
}

function closeColumnForm() {
    $('#columnForm').form('clear');
    $('#itemEditorDialog').dialog('close');
}


function addRootColumn() {
	$('#columnForm').form('load', {
        'column.id':-1,
        'column.parentId':2
    });
    $('#itemEditorDialog').show();
    $('#itemEditorDialog').dialog({
        title:'添加栏目',
        modal:true
    });
}

function addColumn() {
    var node = $('#columnsGrid').treegrid('getSelected');
    var rows = $('#columnsGrid').treegrid('getSelections');

    if (rows.length != 1) {
        $.messager.alert('警告', '请选择一条记录!', 'warning');
        return;
    }
    $('#columnForm').form('load', {
    	'column.id':-1,
        'column.parentId':node.id
    });

    $('#itemEditorDialog').show();
    $('#itemEditorDialog').dialog({
        title:'添加栏目',
        modal:true
    });
}

function editColumn() {
    var node = $('#columnsGrid').treegrid('getSelected');
    var rows = $('#columnsGrid').treegrid('getSelections');

    //alert(node.name);
    if (rows.length != 1) {
        $.messager.alert('警告', '请选择一条记录!', 'warning');
        return;
    }

    $('#columnForm').form('load', {
        'column.parentId':node.parentId,
        'column.id':node.id,
        'column.name':node.name
    });

    $('#itemEditorDialog').show();
    $('#itemEditorDialog').dialog({
        title:'编辑栏目',
        modal:true
    });
}

function deleteColumn() {
    var node = $('#columnsGrid').treegrid('getSelected');
    var rows = $('#columnsGrid').treegrid('getSelections');

    if (rows.length != 1) {
        $.messager.alert('警告', '请选择一条记录!', 'warning');
        return;
    }
    $('#columnForm').form('load', {
        'column.id':node.id,
        'column.name':node.name
    });
    $.messager.confirm('确认','确认要删除吗?',function(fn){   
        if (fn){        	
        	$("#columnForm").form('submit', {
                url: "delete_column.action",
                success:function(data) {
                    $('#columnsGrid').treegrid('reload');
                }
            });   
        }   
    });  
}

	$(function() {
		$('#columnsGrid').treegrid( {
			url : 'find_columns.action',
			idField:'id',
			treeField : 'name',
			rownumbers:true,
			columns : [ [ 
				{field : 'id',title : 'ID',width : 120},
			 	{field : 'name',title : '名字',width : 120}		 			
			] ],
			toolbar:[
			            {
			                text:'添加一级栏目',
			                iconCls:'icon-add',
			                handler:function() {
			                    addRootColumn();
			                }
			            },
			            {
			                text:'添加子栏目',
			                iconCls:'icon-add',
			                handler:function() {
			                    addColumn();
			                }
			            },
			            {
			                text:'编辑栏目',
			                iconCls:'icon-edit',
			                handler:function() {
			                    editColumn();
			                }
			            },
			            '-',
			            {
			                text:'删除栏目',
			                iconCls:'icon-remove',
			                handler:function() {
			                    deleteColumn();
			                }
			            }
			       ]
		});
	});
</script>
</head>
<body>

<h1>TreeGrid</h1>

<table id="columnsGrid"></table>
<div id="itemEditorDialog" icon="icon-save" title="栏目管理" style="height:400;width:400;display:none;padding:5px;">
    <form method="post" id="columnForm" name="columnForm">
        <table>
            <tr>
                <td><label>栏目名称：</label></td>
                <td><input class="easyui-validatebox" id="name" name="column.name" required="true"/></td>
            </tr>
        </table>
        <div class="toolbar" style="padding:10px;">
            <a href="#" onclick="createColumn()" class="easyui-linkbutton" iconCls="icon-ok">确定</a>
            <a href="#" onclick="closeColumnForm()" class="easyui-linkbutton" iconCls="icon-cancel">取消</a>
        </div>
        <input  name="column.id"/>
        <input  name="column.parentId"/>
    </form>
</div>
</body>
</html>